<template>
  <div class="input-delegate-wrapper">
    <InputDelegate :auth="auth" :notNull="notNull" :field="field" :component="component"
                   ref="refComponent" @fieldValueChange="fieldValueChange"/>
    <template v-if="isShowRelationButton">
      <div class="relation-button" v-context="relationContext"
           v-show="auth === 'edit'">
        <document/>
      </div>
      <FormRelationSelector @ok="doRelation" ref="refFormRelationSelector"/>
    </template>
  </div>
</template>
<script setup>
import {computed, defineEmits, shallowRef} from 'vue';
import {DefaultFieldDefinition} from '@/components/form/DefaultFormDefinition';
import InputDelegate from '@/components/form/FormInputDelegates/InputDelegate.vue';
import Document from '@/icons/document.vue';
import FormRelationSelector from '@/components/platwork/FormRelationSelector/index.vue';
import {real} from '@/utils/CommonUtils';

const props = defineProps({
  component: undefined,
  formRenderHelper: {
    type: Object,
    default: () => ({}),
  },
  fieldRelations: {
    type: Array,
    default: () => [],
  },
  auth: {
    type: String,
    default: 'static'
  },
  notNull: {
    type: String,
    default: '0' //0表示非必填, 1表示必填
  },
  field: {
    type: Object,
    default() {
      return DefaultFieldDefinition;
    }
  }
});
const refComponent = shallowRef();
const refFormRelationSelector = shallowRef();
const emits = defineEmits(['fieldValueChange']);
const context = {
  context: [],
  click: onContext,
  close: () => null,
};

const isShowRelationButton = computed(() => {
  return props.fieldRelations.length >= 1;
});

const relationContext = computed(() => {
  context.context = [];
  for (let i = 0; i < props.fieldRelations.length; i++) {
    context.context.push({
      title: props.fieldRelations[i].relationTitle,
      id: props.fieldRelations[i].id
    });
  }
  return context;
});

function onContext(relation) {
  relation = real(relation);
  let formRenderHelper = real(props.formRenderHelper);
  refFormRelationSelector.value.setData({
    formData: formRenderHelper.getFormData(),
    relation
  });
  context.close();
}


function getFieldValue(rowData) {
  return refComponent.value.getFieldValue(rowData);
}

function resetField() {
  return refComponent.value.resetField();
}

function setFieldValue(value, obj) {
  return refComponent.value.setFieldValue(value, obj);
}

function getFieldValueText() {
  return refComponent.value.getFieldValueText();
}

function fieldValueChange(field) {
  emits('fieldValueChange', field);
}

function getFieldValueWithCheck(rowData) {
  return refComponent.value.getFieldValueWithCheck(rowData);
}

function doRelation(relationParams) {
  real(props.formRenderHelper).doRelation(relationParams)
}

defineExpose({
  getFieldValue,
  setFieldValue,
  resetField,
  getFieldValueText,
  getFieldValueWithCheck,
});
</script>
<script>
export default {
  name: 'InputDelegateWrapper'
};
</script>
<style>
.input-delegate-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.relation-button {
  width: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: #79bbff;
}

.relation-button:hover {
  color: #1890ff;
}


</style>
